<template>
  <el-container>
    <el-header>
      <div class="header-container">
        <HeaderComponent />
        <SearchComponent @search="handleSearch" />
      </div>
    </el-header>
    <el-main>
      <!-- 主要内容区域 -->
      <CategoryComponent />
      <CarouselComponent />
      <ChannelSquareComponent />
      <GuessYouLikeComponent />
    </el-main>
    <el-footer>
      <FooterComponent />
    </el-footer>
  </el-container>
</template>

<script>
import HeaderComponent from './components/HeaderComponent.vue';
import SearchComponent from './components/SearchComponent.vue';
import CategoryComponent from './components/CategoryComponent.vue'; // 新增导入
import CarouselComponent from './components/CarouselComponent.vue'; // 新增导入
import ChannelSquareComponent from './components/ChannelSquareComponent.vue'; // 新增导入
import GuessYouLikeComponent from './components/GuessYouLikeComponent.vue'; // 新增导入
import FooterComponent from './components/FooterComponent.vue';

export default {
  name: 'App',
  components: {
    HeaderComponent,
    SearchComponent,
    CategoryComponent, // 新增组件注册
    CarouselComponent, // 新增组件注册
    ChannelSquareComponent, // 新增组件注册
    GuessYouLikeComponent, // 新增组件注册
    FooterComponent,
  },
  methods: {
    handleSearch(query) {
      console.log('搜索关键字:', query);
      this.$router.push({ name: 'SearchResults', query: { q: query } });
    },
  },
};
</script>

<style>
.el-aside {
  background-color: #f9f9f9;
}

.el-main {
  padding: 20px;
}

.el-footer {
  text-align: center;
  line-height: 60px;
  background-color: #eef1f6;
}
</style>